<!DOCTYPE HTML>
<link rel="stylesheet" href="editormd/css/editormd.css" />
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <title>三3三博客社区</title>
    <link rel="icon" href="../images/icon.jpg" sizes="32x32">
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<LINK rel="Bookmark" href="favicon.ico" >
<LINK rel="Shortcut Icon" href="../../images/icon.jpg" />
<!--[if lt IE 9]>
<script type="text/javascript" src="/staticRes/js/html5shiv.js"></script>
<script type="text/javascript" src="/staticRes/js/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="plugin/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="plugin/Hui-iconfont/1.0.8/iconfont.min.css" />
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="plugin/pifu/pifu.css" />
<link rel="stylesheet" type="text/css" href="plugin/wangEditor/css/wangEditor.min.css">
<!--[if lt IE 9]>
<link href="/staticRes/lib/h-ui/css/H-ui.ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } function showSide(){$('.navbar-nav').toggle();}</script>
</head>
<body>
<header class="navbar-wrapper">
    <div class="navbar navbar-fixed-top">
        <div class="container cl">
            <a aria-hidden="false" class="nav-toggle Hui-iconfont visible-xs" href="javascript:void(0);" onclick="showSide();">&#xe667;</a>
            <nav class="nav navbar-nav nav-collapse w_menu" role="navigation">
                <ul class="cl">
                    <li class="active"> <a href="/main.html" data-hover="主页面">主页面</a> </li>
                    <li class="active"> <a href="/blog/list" data-hover="首页">首页</a> </li>
                    <li> <a href="about.html" data-hover="关于我">关于我</a> </li>
                    <li> <a href="mood.html" data-hover="碎言碎语">碎言碎语</a> </li>
<!--                    <li><a href="article.html" data-hover="学无止尽">学无止尽</a></li>-->
                    <li> <a href="board.html" data-hover="留言板">留言板</a> </li>
                    <li> <a href="writing.html" data-hover="写博客">写博客</a> </li>
                    <li> <a href="myBlog.html" data-hover="写博客">我的博客</a> </li>
                </ul>
            </nav>
            <nav class="navbar-nav navbar-userbar hidden-xs hidden-sm " style="top: 0;">
                <ul class="cl">
                    <li class="userInfo dropDown dropDown_hover">
                            <!--<a href="javascript:;" ><img class="avatar radius" src="img/40.jpg" alt="丶似浅 "></a>
                            <ul class="dropDown-menu menu radius box-shadow">
                                <li><a href="/app/loginOut">退出</a></li>
                            </ul>-->
                        <a href="../login.html" onclick="layer.msg('正在通过QQ登入', {icon:16, shade: 0.1, time:0})" ><img class="avatar size-S" src="img/qq.jpg" title="登入">退出</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>

<!--导航条-->
<nav class="breadcrumb">
  <div class="container"> <i class="Hui-iconfont">&#xe67f;</i> <a href="index.html" class="c-primary">首页</a> <span class="c-gray en">&gt;</span>  <span class="c-gray">博客</span> <span class="c-gray en">&gt;</span>  <span class="c-gray">[[${blog.title}]]</span></div>
</nav>

<section class="container pt-20">

	<div class="row w_main_row">


				<div class="col-lg-9 col-md-9 w_main_left">
					<div class="panel panel-default  mb-20">
						<div class="panel-body pt-10 pb-10">
							<h2 class="c_titile">[[${blog.title}]]</h2>
							<p class="box_c"><span class="d_time">发布时间：[[${blog.createDate}]]</span><span>作者：[[${blog.authorName}]]</span><span>阅读（[[${blog.views}]]）</span></p>
                            <div id="test-editor" style="width: 850px">
                                <input type="hidden" id="context" th:value="${blog.content}">
                                <textarea id="message" name="message">
                                </textarea>
                            </div>

							<div class="keybq">
						    	<p><span>关键字</span>：<a class="label label-default">个人博客</a><a class="label label-default">java</a><a class="label label-default">空间</a></p>
						    </div>

							<div class="nextinfo">
                                <p class="last" style="font-size: 15px">上一篇：<a th:onclick="getDetail([[${last.id}]])"><font color="#1e90ff">[[${last.title}]]</font></a></p>
                                <p class="next" style="font-size: 15px">下一篇：<a th:onclick="getDetail([[${next.id}]])"><font color="#1e90ff">[[${next.title}]]</font></a></p>
						    </div>

						</div>
					</div>

					<div class="panel panel-default  mb-20">
						<div class="tab-category">
                <a href=""><strong>评论区</strong></a>
            </div>
						<div class="panel-body">
							<div class="panel-body" style="margin: 0 3%;">
                    <div class="mb-20">
                    	<ul class="commentList" id="commentbox">
<!--                            <li class="item cl"> <a href="#"><i class="avatar size-L radius"><img alt="" src="http://qzapp.qlogo.cn/qzapp/101388738/1CF8425D24660DB8C3EBB76C03D95F35/100"></i></a>-->
<!--                                <div class="comment-main">-->
<!--                                    <header class="comment-header">-->
<!--                                        <div class="comment-meta"><a class="comment-author" href="#">老王</a>-->
<!--                                            <time title="2014年8月31日 下午3:20" datetime="2014-08-31T03:54:20" class="f-r">2014-8-31 15:20</time>-->
<!--                                        </div>-->
<!--                                    </header>-->
<!--                                    <div class="comment-body">-->
<!--                                        <p> 是的</p>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </li>-->
<!--                            <li class="item cl"> <a href="#"><i class="avatar size-L radius"><img alt="" src="http://qzapp.qlogo.cn/qzapp/101388738/696C8A17B3383B88804BA92ECBAA5D81/100"></i></a>-->
<!--                                <div class="comment-main">-->
<!--                                    <header class="comment-header">-->
<!--                                        <div class="comment-meta"><a class="comment-author" href="#">老王</a>-->
<!--                                            <time title="2014年8月31日 下午3:20" datetime="2014-08-31T03:54:20" class="f-r">2014-8-31 15:20</time>-->
<!--                                        </div>-->
<!--                                    </header>-->
<!--                                    <div class="comment-body">-->
<!--                                        <p><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/5c/huanglianwx_thumb.gif"><br></p><p>哈哈</p>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </li>-->

                        </ul>

                    </div>
                    <div class="line"></div>
                    <!--用于评论-->
                    <div class="mt-20" id="ct">
                        <div id="err" class="Huialert Huialert-danger hidden radius">成功状态提示</div>
                        <textarea id="textarea1" name="comment" style="height:200px;" placeholder="看完不留一发？"> </textarea>
                        <div class="text-r mt-10">
                            <button th:onclick="getPlainTxt([[${blog.id}]])" class="btn btn-primary radius" > 发表评论</button>
                        </div>
                    </div>
                    <!--用于回复-->
                    <div class="comment hidden mt-20">
                        <div id="err2" class="Huialert Huialert-danger hidden radius">成功状态提示</div>
                            <textarea id="textarea3" class="textarea" style="height:100px;" > </textarea>
                            <input id="replyId" type="hidden" value="">
                            <button th:onclick="getPlainTxt2([[${blog.id}]])" type="button" class="btn btn-primary radius mt-10">回复</button>
                            <a class="cancelReply f-r mt-10">取消回复</a>
                    </div>

                </div>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-3" >

                    <!--热门推荐-->
                    <div class="bg-fff box-shadow radius mb-20" >
                        <div class="tab-category">`
                            <input id="blogIdInfo" type="hidden" th:value="${blog.id}">
                            <a href=""><strong>精彩推荐</strong></a>
                        </div>
                        <div class="tab-category-item" >
                            <ul class="index_recd">
                                <li th:each="blog,num:${list}">
                                    <a th:onclick="getDetail([[${blog.id}]])">[[${blog.title}]]</a>
                                    <p class="hits"><i class="Hui-iconfont" title="热量">&#xe6c1;</i> [[${blog.views}]] </p>
                                </li>
                            </ul>
                        </div>
                    </div>

					<!--图片-->
		<div class="bg-fff box-shadow radius mb-20">
			<div class="tab-category">
				<a href=""><strong>扫我添加站主vx</strong></a>
			</div>
			<div class="tab-category-item">
				<img data-original="temp/jj.png" class="img-responsive lazyload" alt="响应式图片">
			</div>
		</div>

				</div>
			</div>

</section>
<footer class="footer mt-20">
		<p>Copyright &copy;2017 wfyvv.com All Rights Reserved. <br>
			<a href="http://www.miitbeian.gov.cn/" target="_blank" rel="nofollow">皖ICP备17002922号</a>  更多模板：<a href="http://www.mycodes.net/" target="_blank">源码之家</a><br>
		</p>
</footer>
<script type="text/javascript" src="plugin/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="plugin/layer/3.0/layer.js"></script>
<script type="text/javascript" src="plugin/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="plugin/pifu/pifu.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script> $(function(){ $(window).on("scroll",backToTopFun); backToTopFun(); }); </script>
<script type="text/javascript" src="plugin/wangEditor/js/wangEditor.min.js"></script>
<script src="editormd/lib/marked.min.js"></script>
<script src="editormd/lib/prettify.min.js"></script>
<script src="editormd/lib/raphael.min.js"></script>
<script src="editormd/lib/underscore.min.js"></script>
<script src="editormd/lib/sequence-diagram.min.js"></script>
<script src="editormd/lib/flowchart.min.js"></script>
<script src="editormd/lib/jquery.flowchart.min.js"></script>
<script src="editormd/editormd.js"></script>
<script type="text/javascript">

    var testEditor;
    $(function () {
            var blogId = document.getElementById("blogIdInfo").value;
            var content = document.getElementById("context").value;
            var data ={
                bId:blogId
            };

    		$("img.lazyload").lazyload({failurelimit : 3});
    		//拼出评论区
        $.ajaxSettings.async = false;//取消异步
        $.getJSON("/remark/list",data, function (data) {
            //console.log(data);
            if (data.length > 0) {
                $("#commentbox").empty();//清空html内容
            }
            $.each(data, function (a,data) {
                $.each(data, function (i, value) {
                    if (value.rrId == 0) {
                        $("#commentbox").append('<li  class="item cl"> <a href="#"><i class="avatar size-L radius"><img alt="" src="http://q.qlogo.cn/qqapp/101388738/1CF8425D24660DB8C3EBB76C03D95F35/100">' +
                            '</i></a><div class="comment-main"><header class="comment-header"><div class="comment-meta"><input type="hidden" id="remarkId'+i+'" value="'+value.id+'"><a class="comment-author">' + value.username +
                            '</a><time class="f-r">' + value.rdate + '</time></div></header><div class="comment-body">' + value.content + '<ul id="'+value.id+'" class="commentList">' +
                            '</ul><button class="hf f-r btn btn-default size-S mt-10" id="test" name="'+value.id+'">回复</button></div></div></li>');
                    } else {
                        var ulId = data[0].id;
                        $("#"+ulId).append('<li class="item cl"><a href="#"><i class="avatar size-L radius"><img src="http://qzapp.qlogo.cn/qzapp/101388738/1CF8425D24660DB8C3EBB76C03D95F35/100"></i></a>' +
                            '<div class="comment-main"><header class="comment-header"><div class="comment-meta"> <a class="comment-author" href="#">' + value.username + ' </a>' +
                            '<time class="f-r">' + value.rdate + '</time></div></header><div class="comment-body"><p>' + value.content + '</p></div></div></li>');
                    }
                })
            })
        });

        wangEditor.config.printLog = false;
        var editor1 = new wangEditor('textarea1');
        editor1.config.menus = ['insertcode', 'quote', 'bold', '|', 'img', 'emotion', '|', 'undo', 'fullscreen'];
        editor1.config.emotions = { 'default': { title: '表情', data: 'plugin/wangEditor/emotions1.data'}, 'default2': { title: '心情', data: 'plugin/wangEditor/emotions3.data'}, 'default3': { title: '顶一顶', data: 'plugin/wangEditor/emotions2.data'}};
        editor1.create();

        // testEditor = editormd.markdownToHTML("test-editor", {
        //     width: "100%",
        //     // height: 700,
        //     path: "editor/lib/", //注意2：你的路径
        //     preview: true,
        //     watch: true,
        //     editor: false,
        //     imageUpload : true,
        //     imageFormats : [ "jpg", "jpeg", "gif", "png", "bmp", "webp" ],
        //     imageUploadURL : "/blog",
        // });

        testEditor = editormd.markdownToHTML("test-editor", {
            markdown:content,
            placeholder : '  欢迎来到博客创作中心，开始你的创作吧。。。',
            // htmlDecode: "style,script,iframe", //可以过滤标签解码
            width : "100%",
            height : 700,
            // syncScrolling : "single",
            // emoji : true,
            path : "editormd/lib/", //注意2：你的路径
            // saveHTMLToTextarea : true,
            // tocm : true, // Using [TOCM]
            // tex : true, // 开启科学公式TeX语言支持，默认关闭
            // flowChart : true, // 开启流程图支持，默认关闭
            // /* 上传图片配置 */
            imageUpload : true,
            imageFormats : [ "jpg", "jpeg", "gif", "png", "bmp", "webp" ],
            imageUploadURL : "/blog", //注意你后端的上传图片服务地址
        });

        //show reply
        $(".hf").click(function () {
            pId = $(this).attr("name");
            $("#replyId").val(this.name);
            $(this).parents(".commentList").find(".cancelReply").trigger("click");
            $(this).parent(".comment-body").append($(".comment").clone(true));
            $(this).parent(".comment-body").find(".comment").removeClass("hidden");
            $(this).hide();
        });
        //cancel reply
        $(".cancelReply").on('click',function () {
            $(this).parents(".comment-body").find(".hf").show();
            $(this).parents(".comment-body").find(".comment").remove();
        });
    });


    //发表评论
    function getPlainTxt(blogId) {
        var text = $("#textarea1").val();
        var rrId = 0;//被回复的id
        // text = text.replace(/\s+/g, "");//先去除空格
        if (text == null || text == "" || text.length <= 1) {
            alert("评论不能为空！");
            return;
        }
        $.ajax({
            type:"POST",
            url:"/remark/save",
            data:{"content":text,"rrId":rrId,"blogId":blogId},
            success: function (data) {
                if (data.code == 200){
                    alert("发表成功！");
                    location.href = "/blog/getDetail?id="+blogId;
                }
                if (data.error != null){
                    alert(data.data);
                }
            }
        })
    }

    function getDetail(articleId) {
        // var articleId = $("#articleId").val();
        location.href = "/blog/getDetail?id="+articleId;
    }

    //回复评论
    function getPlainTxt2(blogId) {
        var text = $("#textarea3").val();
        var rrId = $("#replyId").val();

        // text = text.replace(/\s+/g, "");//先去除空格
        if (text == null || text == "" || text.length <= 1) {
            alert("评论不能为空！");
            return;
        }
        $.ajax({
            type: "POST",
            url: "/remark/save",
            data: {"content": text, "rrId": rrId, "blogId": blogId},
            success: function (data) {
                if (data.code == 200) {
                    alert("发表成功！");
                    location.href = "/blog/getDetail?id=" + blogId;
                } else {
                    alert(data.data);
                }
            }
        })
    }

</script>
</body>
</html>
